<template>
	<page-meta :page-style="'overflow:'+(pageMetaShow?'hidden':'visible')"></page-meta>
	<view class="content" :style="{paddingTop: titleTop + 'px'}">
		<image class="indexBg" src="/static/index/indexBg.png" mode="widthFix"></image>
		<view class="mainHeader" :style="{minHeight: statusBarHeight+'px'}">
			<view class="headerTop">
				<image class="logo" src="/static/index/logo.png" mode="widthFix"></image>
				<view class="waitingLay">
					<waiting ref="waiting"></waiting>
				</view>
			</view>
			<view class="headerSearch">
				<view class="searchBox">
					<uni-icons type="search" color="#fff" size="20"></uni-icons>
					<input type="text" v-model.trim="value1" />
				</view>
				<image class="searchIcon" src="/static/index/searchIcon.png" mode="widthFix"
					@click="linkUrl(`/pages/index/storeSearchAndRetrieval?value=${value1}`)"></image>
			</view>
		</view>
		<view class="theList">
			<view class="listItem listNav_1">
				<view class="" @click="linkUrl('/pages/index/hotNew?type=1')">

					<image class="bg" src="/static/index/listNav_1.png" mode="aspectFit"></image>
					<image class="bgTitle" src="/static/index/hot_1.png" mode="widthFix"></image>

				</view>
				<view class="title">
					{{latestMachines[latestIndex].name}}
				</view>
				<view class="itemImg">
					<centerZoomSwiper :bannerList="latestMachines" :autoplay="true" :interval="3000"
						@change="onSwiperChange1" @click="onSwiprtItemClick"></centerZoomSwiper>
					<!-- <image src="https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg"
						mode="aspectFill"></image> -->
				</view>
				<!-- 考虑到层级问题，我弄一个空白的view盖在这个轮播图上面充当点击图层 -->
				<view class="clickView"
					@click="linkUrl('/pages/gashaponMachine/gashaponMachine'+'?id='+latestMachines[latestIndex].id)">
				</view>
			</view>
			<view class="listItem listNav_2">
				<view @click="linkUrl('/pages/index/hotNew?type=2')">

					<image class="bg" src="/static/index/listNav_2.png" mode="aspectFill"></image>
					<image class="bgTitle" src="/static/index/hot_2.png" mode="widthFix"></image>
				</view>
				<view class="title">
					{{todayPopular[todayIndex].name}}
				</view>
				<view class="itemImg">
					<centerZoomSwiper :bannerList="todayPopular" :autoplay="true" :interval="3000"
						@change="onSwiperChange2" @click="onSwiprtItemClick"></centerZoomSwiper>
					<!-- <image src="https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg"
						mode="aspectFill"></image> -->
				</view>
				<!-- 考虑到层级问题，我弄一个空白的view盖在这个轮播图上面充当点击图层 -->
				<view class="clickView"
					@click="linkUrl('/pages/gashaponMachine/gashaponMachine'+'?id='+todayPopular[todayIndex].id)">
				</view>

			</view>
			<view class="listItem listNav_3">
				<view @click="linkUrl('/pages/index/hotNew?type=3')">
					<image class="bg" src="/static/index/listNav_3.png" mode="aspectFill"></image>
					<image class="bgTitle" src="/static/index/hot_3.png" mode="widthFix"></image>
				</view>
				<view class="title">
					{{monthPopular[monthIndex].name}}
				</view>
				<view class="itemImg">
					<centerZoomSwiper :bannerList="monthPopular" :autoplay="true" :interval="3000"
						@change="onSwiperChange3" @click="onSwiprtItemClick"></centerZoomSwiper>
					<!-- <image src="https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg"
						mode="aspectFill"></image> -->
				</view>
				<!-- 考虑到层级问题，我弄一个空白的view盖在这个轮播图上面充当点击图层 -->
				<view class="clickView"
					@click="linkUrl('/pages/gashaponMachine/gashaponMachine'+'?id='+monthPopular[monthIndex].id)">
				</view>

			</view>
		</view>
		<view class="slideshowLay">
			<!-- 这里有点怪，先向下 -->
			<carousel type="2" previousMargin="40rpx" :itemHeight='316' nextMargin="40rpx" :img-list="imgList"
				url-key="image_url" @selected="selectedBanner"></carousel>
		</view>
		<view class="listLay">

			<view class="filterBNox">
				<view class="navLay">

					<!-- 横向滚动的scroll-view -->
					<scroll-view scroll-x="true" class="nav-scroll nav-scroll1">
						<!-- 导航项容器 -->
						<view :class="index==navIndex?'nav-item navAction':'nav-item'"
							v-for="(item, index) in category_list" :key="index" @click="navigateTo(item,index,1)">
							{{ item.label }}
						</view>
					</scroll-view>
					<scroll-view scroll-x="true" class="nav-scroll">
						<!-- 导航项容器 -->
						<view :class="index==navIndex2?'nav-item navAction':'nav-item'"
							v-for="(item, index) in category_list2" :key="index" @click="navigateTo(item,index,2)">
							{{ item.label }}
						</view>
					</scroll-view>
				</view>

				<view class="conditions">
					<view class="item" v-for="(item,index) in orderbyData" :key="index"
						@click="orderbyClick(item,index)">
						<view class="title" :class="{action:orderbyIndex==index}">{{item.label}}</view>
						<view class="icon">
							<view class="up" :class="item.sort=='asc'&&orderbyIndex==index?'action':''">
								▲
							</view>
							<view class="down" :class="item.sort=='desc'&&orderbyIndex==index?'action':''">
								▼
							</view>
						</view>
					</view>
					<!-- <view class="item" @click="toggle('bottom')">
						<uni-icons type="bars" color="#717171" size="18"></uni-icons>
					</view> -->
				</view>
			</view>
			<noData v-if="machinesList.length === 0 && !loading"></noData>
			<template v-else>
				<view class="pictureItem" v-for="(item,index) in machinesList" :key="index">
					<pictureDisplay :dataItem="item" v-if="item.showtype==1"></pictureDisplay>
					<pictureDisplayTow :dataItem="item" v-else></pictureDisplayTow>
				</view>
				<!-- 使用uni-load-more组件显示加载状态 -->
				<uni-load-more :status="loading ? 'loading' : noMoreData ? 'noMore' : 'more'"
					iconType="auto"></uni-load-more>
				<!-- <view class="pictureItem">
			</view> -->
			</template>
		</view>

		<uni-popup ref="popup" safe-area @change="change" background-color="#fff" borderRadius="40px 40px 0 0">
			<view class="popup-content">
				<view class="selectlay">
					<view class="box" v-for="(item,index) in search_info" :key="index">
						<view class="title">{{item.label}}</view>
						<view class="options">

							<view :class="item2.action?'option action':'option'" v-for="(item2,index2) in item.children"
								:key="index2" @click="optionFn(item2)">{{item2.label}}</view>

						</view>
					</view>
				</view>
				<view class="bntLay">
					<view class="item reset">
						重置
					</view>
					<view class="item">
						完成
					</view>
				</view>
			</view>
		</uni-popup>
		<tabbar :current="currentTab"></tabbar>
		<!-- @tabChange="onTabChange" -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				pageMetaShow: false,
				imgList: [
					/* {
					url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					id: 1
				}, {
					url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					id: 2
				}, {
					url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					id: 3
				}, {
					url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					id: 4
				}, */
				],
				value1: "",
				styles: {
					backgroundColor: " #F2F2F2",
					color: '#343434',
					borderColor: '#F2F2F2'
				},
				navList: [{
						name: '首页'
					},
					{
						name: '产品'
					},
					{
						name: '关于'
					},
					{
						name: '联系'
					},
					{
						name: '产品'
					},
					{
						name: '关于'
					},
					{
						name: '联系'
					},
					{
						name: '产品'
					},
					{
						name: '关于'
					},
					{
						name: '联系'
					},
					{
						name: '产品'
					},
					{
						name: '关于'
					},
					{
						name: '联系'
					},
					// 可以根据需要添加更多导航项
				],
				navIndex: 0,
				navIndex2: 0,

				machinesList: [],
				page: 1, // 当前页码
				page_size: 10, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据

				latestMachines: '', //最新上架
				monthPopular: '', //本月热门
				todayPopular: '', //今日热门
				latestIndex: 0,
				todayIndex: 0,
				monthIndex: 0,
				category_list: [],
				category_list2: [],
				search_info: [],
				orderbyIndex: 0,
				orderbySort: 'asc',
				orderbyData: [{
					label: '热度',
					value: 'popularity',
					sort: 'asc'
				}, {
					label: '时间',
					value: 'updated_at',
					sort: 'asc'
				}, {
					label: '价格',
					value: 'price',
					sort: 'asc'
				}, {
					label: '最近购买',
					value: 'buyed',
					sort: 'asc'
				}, ],
				orderby: 'popularity',
				machineType: 0, // 机台类型筛选：0=扭蛋，1=直购
				home_type: '',
				home_value: '',
			}
		},
		async onLoad() {
			await this.$onLaunched
			this.getSliderFn();
			this.getHomeBannerFn();
			this.categoryInfoFn();
		},
		onShow() {

		},
		// 触底加载更多
		onReachBottom() {
			// 如果没有更多数据或正在加载，则返回
			if (this.noMoreData || this.loading) return

			// 页码增加并获取下一页数据
			this.page++
			this.getMachinesListFn()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.resetList()
			// 设置超时自动停止刷新（防止接口失败导致一直刷新）
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 5000);
		},
		// onShareAppMessage(res) {
		// 	return {
		// 		title: "给你分享了一份宝藏，快进来看看～",
		// 		path: '/pages/index/index',
		// 		imageUrl: '../../static/share.png'
		// 	};
		// },
		methods: {
			orderbyClick(item, index) {
				// 第一次选中
				if (this.orderbyIndex != index) {
					this.orderbyIndex = index;
					this.orderby = item.value;
					item.sort = 'asc'
				} else {
					// 重复点击
					if (item.sort == 'asc') {
						item.sort = 'desc'
					} else {
						item.sort = 'asc'
					}
				}
				this.orderbySort = item.sort;
				this.resetList()
			},
			linkUrl(url) {
				uni.navigateTo({
					url
				})
			},
			selectedBanner(item, index) {
				console.log('馃', item, index)
			},
			// 处理导航点击事件，根据index跳转页面或执行其他操作
			navigateTo(item, index, number) {
				// 判断那个nav点了
				if (number == 1) {
					this.navIndex = index;
					this.machineType = item.type //// 机台类型筛选：0=扭蛋，1=直购
				} else {
					this.navIndex2 = index;
					this.home_type = item.home_type;
					this.home_value = item.value;
				}
				this.resetList()
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			change(e) {
				this.pageMetaShow = e.show
			},
			optionFn(item2) {
				item2.action = !item2.action
			},
			// 轮播图
			getSliderFn() {
				this.$http('/v1/home/slides').then(res => {
					console.log(res);
					this.imgList = res.data;
				})
			},
			// 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1
				this.noMoreData = false
				this.getMachinesListFn()
			},
			getMachinesListFn() {
				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.$http('/v1/machines/list-by-conditions', {
						page: this.page,
						page_size: this.page_size,
						orderby: this.orderby, // 排序字段：popularity=人气，updated_at=更新时间，price=价格，buyed=购买历史
						orderby_v: this.orderbySort,//// 排序方向：asc=升序，desc=降序，默认asc
						type: this.machineType, // 机台类型筛选：0=扭蛋，1=直购
						home_type: this.home_type, // 动态筛选类型：type=机台类型，style=风格，category=分类，price=价格
						value: Number(this.home_value), // 筛选值，配合home_type使用
					}, 'post').then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							// 如果是第一页，直接赋值
							if (this.page === 1) {
								this.machinesList = data.list || []
							} else {
								// 后续页，合并数据
								this.machinesList = [...this.machinesList, ...(data.list || [])]
							}

							// 更新总数据量
							this.total = data.total || 0

							// 判断是否还有更多数据
							this.noMoreData = this.machinesList.length >= this.total
							// this.machinesList = res.data.list;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},
			onSwiperChange1(index) {
				// console.log('切换到第', index + 1, '张轮播图');
				this.latestIndex = index;
			},
			onSwiperChange2(index) {
				// console.log('切换到第', index + 1, '张轮播图');
				this.todayIndex = index;
			},
			onSwiperChange3(index) {
				// console.log('切换到第', index + 1, '张轮播图');
				this.monthIndex = index;
			},
			onSwiprtItemClick(id) {
				console.log(id, "1111111111");
				this.linkUrl('/pages/gashaponMachine/gashaponMachine' + '?id=' + id)
			},
			// 首页-顶部按钮
			getHomeBannerFn() {
				this.$http('/v1/home/banner').then(res => {
					console.log(res, "顶部按钮");
					this.latestMachines = res.data.latest_machines.machines;
					this.monthPopular = res.data.month_popular.machines;
					this.todayPopular = res.data.today_popular.machines;
				})
			},
			// 首页-搜索选项
			categoryInfoFn() {
				this.$http('/v1/home/category-info').then(res => {
					console.log(res, "搜索选项");
					/* let arr = []
					res.data.forEach(item => {
						arr.push(...item.children);
					})
					console.log(arr, "children-arr"); */
					this.search_info = res.data;
					this.category_list = res.data[0].children;
					this.category_list2 = res.data[1].children;
					this.navIndex = 0;
					this.navIndex2 = 0;
					this.machineType = res.data[0].children[this.navIndex].type //// 机台类型筛选：0=扭蛋，1=直购
					this.home_type = res.data[1].children[this.navIndex2].home_type;
					this.home_value = res.data[1].children[this.navIndex2].value;
					
					this.resetList()
				})
			},

		}
	}
</script>
<style>
	page {
		background-color:
			#F8F2F6;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.indexBg {
		width: 100vw;
		height: 0;
		position: fixed;
		z-index: -2;
		top: 0;
	}

	.mainHeader {
		padding-left: 20upx;
		margin-bottom: 12upx;

		.headerTop {
			@include flexLayout(flex-end);

			.logo {
				@include setwh(180upx, 0)
			}

			::v-deep .waitingLay {
				padding-left: 16upx;
				min-width: 232upx;

				.loadingNum {
					font-size: 15rpx;
					color: #FF9999;

					text {
						color: #FCDBE5;
						font-size: 26rpx;
					}
				}
			}
		}

		.headerSearch {
			@include flexLayout(center, space-between);

			.searchBox {
				@include flexLayout(center);
				width: 534rpx;
				height: 74rpx;
				padding-left: 34upx;
				background: rgba(255, 255, 255, 0.3);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(173, 173, 173, 0.5);
				border-radius: 38rpx;
				backdrop-filter: blur(16px);

				input {
					width: 80%;
					padding-left: 20upx;
					color: #fff;
				}
			}

			.searchIcon {
				@include setwh(90upx, 0);
				margin-right: 55upx;
			}
		}
	}

	.theList {
		width: 722upx;
		height: 280upx;
		margin: 0 auto;
		position: relative;

		// @include flexLayout(center, space-between);
		.listItem {
			position: absolute;

			.bg {
				height: 272upx;
				z-index: 2;
			}

			.bgTitle {
				position: absolute;
				z-index: 3;
				right: 94upx;
				top: 14upx;
				width: 122upx;
				height: 0;
			}

			.title {
				position: absolute;
				z-index: 3;
				top: 68upx;
				font-weight: normal;
				font-size: 16rpx;
				line-height: 18rpx;
				font-family: kkt;
			}

			.itemImg {
				position: absolute;
				z-index: -1;
				width: 228upx;
				height: 154upx;
				border-radius: 20upx;
				// border-radius: 150rpx 25rpx 0 0 / 45rpx 16rpx 0 0;

				// clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
				// clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

			}

			.clickView {
				position: absolute;
				left: 30upx;
				// right: 0;
				bottom: 30upx;
				// background-color: #000000;
				width: 80%;
				height: 150upx;
			}
		}

		.listNav_1 {
			left: 0;

			.bg {
				width: 266upx;
			}

			.title {
				left: 18upx;
				color: #C07F00;
			}

			.itemImg {
				left: 22upx;
				top: 94upx;
				width: 240upx;
				height: 160upx;
				// background-color: rgba(13, 113, 13, 0.5);
				border-radius: 24upx;
				/* 圆角效果 */
				//                  左上  右上    右下脚  左下角
				clip-path: polygon(0% 0%, 78% 0%, 96% 100%, 0% 100%);
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.listNav_2 {
			left: 216upx;

			// @include positionCenter;
			.bg {
				width: 300upx;
			}

			.title {
				left: 28upx;
				color: #A82A81;
			}

			.itemImg {
				right: 18upx;
				top: 98upx;
				width: 240upx;
				height: 154upx;
				// background-color: rgba(123, 113, 13, 0.5);
				border-radius: 24upx;
				/* 圆角效果 */
				// clip-path: polygon(0 0, 100% 0, 100% 100%,0% 100%);
				//                  左上  右上    右下脚  左下角
				clip-path: polygon(0% 0%, 88% 0%, 100% 100%, 14% 100%);
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.listNav_3 {
			right: 0;

			.bg {
				width: 258upx;
			}

			.bgTitle {
				right: 50upx;
			}

			.title {
				left: 28upx;
				color: #005DC9;
			}

			.itemImg {
				right: 18upx;
				top: 98upx;
				width: 200upx;
				height: 154upx;
				// background-color: rgba(173, 173, 173, 0.5);
				border-radius: 24upx;
				/* 圆角效果 */
				clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	::v-deep .slideshowLay {
		margin-bottom: 40upx;

		.item-img,
		.item-img-side {
			border: 10upx solid #fff;
			border-radius: 34upx;
		}

		.swiper-item {
			// height: 316upx;
		}

		.item-img {
			height: calc(100% - 20upx);

		}
	}

	.listLay {
		width: 700upx;
		margin: 0 auto;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.filterBNox {
			.navLay {
				@include flexLayout(center);

				.nav-scroll1 {
					// background-color: rebeccapurple;
					width: 300upx;
				}
			}

			.nav-scroll {
				white-space: nowrap;
				/* 防止子元素换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				-webkit-appearance: none;
			}

			.nav-item {

				display: inline-block;
				font-family: AlimamaFangYuanTiVF;
				font-weight: 400;
				font-size: 25rpx;
				color: #5E5E5E;
				@include setwh(96upx, 58upx);
				padding-top: 6upx;
				text-align: center;

			}

			.navAction {
				background: url('/static/index/navItem.png') no-repeat;
				background-size: 100% 100%;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				// animation: scaleRotateBG 5s ;
				// animation: resizeBackground 5s;
				animation: moveBackground ease-in-out 0.2s alternate;
			}

			@keyframes moveBackground {
				from {
					background-position: 0 100upx;

				}

				to {
					background-position: 0 0;

				}
			}

			.conditions {
				@include flexLayout(center, space-between);
				margin: 20upx 0 24upx;

				.item {
					width: 20%;
					@include flexLayout(center, center);

					.title {
						font-family: AlimamaFangYuanTiVF;
						font-weight: 500;
						font-size: 22rpx;
						color: #656565;
						position: relative;

						&:after {
							content: '';
							width: 27rpx;
							height: 4rpx;
							background: none;
							border-radius: 2rpx;
							@include positionCenter;
							top: 34upx;
						}
					}

					.action {
						font-weight: bold;
						color: #000000;

						&:after {
							content: '';
							background: linear-gradient(242deg, #FFCDB0 0%, #FF80B9 100%);

						}
					}

					.icon {
						display: flex;
						flex-direction: column;
						color: #BBBBBB;
						font-size: 10upx;
						line-height: 1;
						margin-left: 8upx;
						font-weight: bold;

						.action {
							font-weight: bold;
							color: #FFA4B4;
						}
					}
				}
			}
		}

		.pictureItem {
			margin-bottom: 24upx;
		}
	}

	.popup-content {
		// border-radius: 78rpx 78rpx 0 0;
		// background: #00FFFF;
		max-height: 80vh;
		padding: 40upx 60upx 80upx;

		.selectlay {
			.box {
				margin-bottom: 50upx;

				.title {
					font-family: SourceHanSansSC;
					font-weight: bold;
					font-size: 34rpx;
					color: #454545;
					line-height: 50rpx;
					margin-bottom: 20upx;
				}

				.options {
					display: flex;
					flex-wrap: wrap;
					/* 允许换行 */
					// gap: 80rpx; /* 元素间距 */
					row-gap: 26upx;
					column-gap: 80rpx;

					.option {
						@include lineOver;
						// flex: 1; /* 关键：自动伸缩 */
						// min-width: calc(33.33% - 80rpx); /* 每行最多3个 */
						// max-width: calc(50% - 40rpx); /* 最少每行2个 */

						padding: 0 20upx;
						white-space: nowrap;

						text-align: center;
						min-width: 152rpx;
						height: 62rpx;
						background: #EAEAEA;
						border-radius: 32rpx;
						line-height: 62rpx;

						font-family: AlimamaFangYuanTiVF, ;
						font-weight: bold;
						font-size: 30rpx;
						color: #AAAAAA;
					}

					.action {
						color: #FFFFFF;
						background: #FFC7C7;
					}
				}
			}
		}

		.bntLay {
			@include flexLayout(center, space-between);
			padding-top: 30upx;

			.item {
				@include flexLayout(center, center);
				width: 306rpx;
				height: 96rpx;
				background: #000000;
				border-radius: 16rpx;
				font-weight: 600;
				font-size: 38rpx;
				color: #FFFFFF;
			}

			.reset {
				background: #E8E8E8;
				color: #757575;
			}
		}
	}
</style>